<template>
  <div class="dify-app-show">
    <div class="app-header">
      <el-input
        v-model="searchText"
        placeholder="搜索应用名称或描述..."
        clearable
        prefix-icon="el-icon-search"
        class="app-search"
      />
    </div>
    <div class="app-list">
      <div v-for="app in filteredList" :key="app.id" class="app-card">
        <div class="app-icon-wrap">
          <template v-if="app.iconUrl">
            <img :src="app.iconUrl" class="app-icon" alt="icon" />
          </template>
          <template v-else>
            <div
              class="app-emoji-icon"
              :style="{
                background: app.difySiteInfo?.icon_background || '#f1f5f9',
              }"
            >
              {{ app.difySiteInfo?.icon || '🧩' }}
            </div>
          </template>
        </div>
        <div class="app-info">
          <div class="app-title">{{ app.appName }}</div>
          <div class="app-desc">{{ app.description }}</div>
        </div>
        <el-button type="primary" class="app-btn" @click="goToDify(app.difyUrl)">
          <span>进入应用</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

const appList = ref([])
const searchText = ref('')

const filteredList = computed(() => {
  let list = appList.value.slice()
  // 如果是admin，追加dify管理后台
  if (userStore.roles && userStore.roles.includes('admin')) {
    list.push({
      id: '__dify_admin__',
      appName: 'dify管理后台',
      description: '',
      iconUrl: '/智能机器人.png',
      difyUrl: 'https://dify.agentmall.htzl.com.cn',
      sortOrder: 99999
    })
  }
  // 排序
  list.sort((a, b) => {
    const aOrder = Number(a.sortOrder) || 0
    const bOrder = Number(b.sortOrder) || 0
    return aOrder - bOrder
  })
  if (!searchText.value) return list
  const keyword = searchText.value.trim().toLowerCase()
  return list.filter(app =>
    (app.appName && app.appName.toLowerCase().includes(keyword)) ||
    (app.description && app.description.toLowerCase().includes(keyword))
  )
})

function goToDify(url) {
  window.open(url, '_blank')
}

onMounted(async () => {
  try {
    const res = await request({ url: '/system/difyApp/difyList', method: 'get' })
    if (res.code === 200) {
      appList.value = res.data
    } else {
      ElMessage.error(res.msg || '获取应用列表失败')
    }
  } catch (e) {
    ElMessage.error('网络错误')
  }
})
</script>

<style scoped>
.dify-app-show {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6f8fc 0%, #e9f0fb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0 80px 0;
  position: relative;
}
.dify-app-show::before {
  content: '';
  position: absolute;
  left: 10vw;
  top: 10vh;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #e0e7ff 0%, transparent 70%);
  z-index: 0;
  opacity: 0.5;
}
.dify-app-show::after {
  content: '';
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #fcd34d 0%, transparent 70%);
  z-index: 0;
  opacity: 0.25;
}
.app-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 36px;
  z-index: 2;
}
.app-search {
  width: 340px;
  max-width: 80vw;
  border-radius: 24px;
  box-shadow: 0 2px 12px 0 rgba(80,120,200,0.08);
  background: #fff;
  font-size: 16px;
}
.app-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 36px;
  justify-content: center;
  z-index: 1;
}
.app-card {
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 6px 32px 0 rgba(80,120,200,0.10);
  width: 340px;
  padding: 38px 28px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.app-card:hover {
  box-shadow: 0 12px 48px 0 rgba(80,120,200,0.18);
  transform: translateY(-6px) scale(1.03);
}
.app-icon-wrap {
  background: linear-gradient(135deg, #e0e7ff 0%, #f1f5f9 100%);
  border-radius: 50%;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 2px 12px 0 rgba(80,120,200,0.08);
}
.app-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 1px 4px 0 rgba(80,120,200,0.06);
}
.app-emoji-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 700;
  box-shadow: 0 1px 4px 0 rgba(80,120,200,0.06);
  color: #222;
  background: #f1f5f9;
}
.app-info {
  text-align: center;
  margin-bottom: 22px;
}
.app-title {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.app-desc {
  font-size: 15px;
  color: #7b8494;
  min-height: 38px;
  line-height: 1.6;
}
.app-btn {
  width: 100%;
  font-size: 16px;
  border-radius: 12px;
  margin-top: 8px;
  background: linear-gradient(90deg, #6366f1 0%, #60a5fa 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px 0 rgba(80,120,200,0.10);
  transition: background 0.2s;
}
.app-btn:hover {
  background: linear-gradient(90deg, #818cf8 0%, #38bdf8 100%);
}
@media (max-width: 900px) {
  .app-list {
    gap: 28px 0;
  }
  .app-card {
    width: 90vw;
    min-width: 0;
    max-width: 400px;
  }
}
</style> 